<template lang="html">
  <div id="pageBox">
    <ul class="mentList">
      <li class="mentItem" v-for="(v,i) in commentList" :key="i">
        <div class="imgBox">
          <div class="headImg">
            <img :src="v.headImg" alt="">
          </div>
        </div>
        <div class="mentContent">
          <div class="nameAndTime">
            <span class="name">{{ v.userName }}</span>
            <span class="time">{{ v.time }}</span>
          </div>
          <div class="mentText overflow2">
            {{ v.context }}
          </div>
          <div v-if="v.reply && v.reply.length" v-for="(item, index) in v.reply" :key="index" class="reply">
            <div class="replyName">{{ item.userName }}</div>
            <div class="replyText overflow2">{{ item.context }}</div>
          </div>
        </div>
        <div class="like" @click="clickZan(v, i)">
          <i class="iconfont icon-zan icon" :class="{zan:v.praise}"></i>
          <span class="likeNum">1</span>
        </div>
      </li>
    </ul>
    <div v-if="!lastPage" class="loadingMore" @click="onMore">
      加载更多
    </div>
  </div>
</template>

<script>
import { onPraise } from '@/api/project'
export default {
  props:["commentList", "lastPage"],
  data(){
    return {
      list: this.commentList
    }
  },
  methods:{
    clickZan(obj, i){
      const { id } = obj
      onPraise(id).then(res => {
        this.commentList[i].praise = true
      })
    },
    onMore() {
      this.$emit('more')
    }
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    .mentList{
      .mentItem{
        display: flex;
        position:relative;
        margin-bottom:30px;
        &:last-child{
          margin-bottom:20px;
        }
        .imgBox{
          width:0.5rem;
          .headImg{
            width:0.5rem;
            height:0.5rem;
            background:#999;
            border-radius: 50%;
            img{
              width:100%;
            }
          }
        }
        .mentContent{
          flex:1;
          padding-left:14px;
          overflow:hidden;
          .nameAndTime{
            color:#999;
            font-size:14px;
            .name{
              margin-right:10px;
            }
          }
          .mentText{
            color:#666;
            margin-top:4px;
          }
          .reply{
            background:#ededed;
            margin-top:4px;
            padding:10px;
            border-radius: 5px;
            font-size:14px;
            .replyName{
              color:#5050F3;
              margin-bottom:4px;
            }
            .replyText{
              color:#666;
            }
          }
        }
        .like{
          position:absolute;
          top:0;
          right:0;
          line-height: 20px;
          font-size:0;
          color:#999;
          .icon{
            font-size:18px;
            &.zan{
              color:#FF4444;
            }
          }
          .likeNum{
            font-size:16px;
            line-height: 16px;
          }
        }
      }
    }
  }
</style>
